<template>
    <div class="Company">
        <!-- 头部 -->
		<Header :navActive="-1" ref="Header"/>
		<!-- 主内容区 -->
		<div class="main cl">
			<div class="banner">
                <div class="w1200">
                    <div class="left fl">
                        <div class="logo"><img :src="info.enLogo_dictText"></div>
                        <div class="text">
                            <div class="name">{{info.enName}}</div>
                            <div class="other">
                                <span v-if="info.enNature">{{info.enNature}}</span>
                                <span v-if="info.enPersonnel">{{info.enPersonnel}}人</span>
                                <span v-if="info.enTrade_dictText">{{info.enTrade_dictText}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="right fr">
                        <el-button type="primary" class="submit" @click="screenC" v-if="info.shFlag">取消屏蔽该企业</el-button>
                        <el-button type="primary" class="submit" @click="screen" v-else>屏蔽该企业</el-button>
                        <div class="jobs">
                            <div class="num">{{info.planCount}}</div>
                            <div class="t">在招职位</div>
                        </div>
                        <div class="cl"></div>
                        <div class="qr">
                            <div id="qrcode"></div>
                            <p>手机端查看该公司</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="block w1200">
                <!-- 热招职位 -->
                <div class="jobs">
                    <div class="bigTitle">热招职位 <router-link :to="{name:'CompanyJob',query:{id:id}}" target="_blank" class="more">全部在招职位<i class="el-icon-arrow-right"></i></router-link></div>
                    <div class="list">
                        <router-link :to="{name:'JobDetails',query:{id:item.id}}" target="_blank" class="item" v-for="(item,index) in jobs" :key="index">
                            <div class="info">
                                <div class="name">{{item.title}}</div>
                                <div class="money">{{item.minMoney === 0 && item.maxMoney === 0 ? '薪资面议' : item.money}}</div>
                                <!-- <div class="money">{{item.money}}</div> -->
                                <div class="dsc">
                                    <span>{{item.jobCity_dictText}}</span>
                                    <span>{{item.eduLevel_dictText}}</span>
                                    <span>{{item.experience}}</span>
                                    <span>{{item.needCount}}人</span>
                                </div>
                            </div>
                        </router-link>
                    </div>
                </div>
                <!-- 公司介绍 -->
                <div class="company">
                    <div class="bigTitle">公司介绍 </div>
                    <div class="box">
                        <div class="left fl">
                            <div class="section">
                                <div class="t">公司简介</div>
                                <p v-html="info.introduce"></p>
                            </div>
                            <div class="section">
                                <div class="t">公司福利</div>
                                <div class="fu">
                                    <span v-if="info.workStart">{{info.workStart}} - {{info.workEnd}}</span>
                                    <span v-if="info.rest">{{info.rest}}</span>
                                    <span v-if="info.workOvertime">{{info.workOvertime}}</span>
									<span v-for="(x,y) in info.otherWelfare" :key="y">{{x}}</span>
								</div>
                            </div>
                            <div class="section">
                                <div class="t">公司地址</div>
                              <!-- 20240416 fangsong   因高德地图API收费，去掉所有关于地图的东西  -->
                                <!-- <div id="map"></div>-->
                                <!-- <div class="address"><i class="el-icon-location-outline"></i>{{info.enLocation}} <a :href="'https://gaode.com/regeo?lng='+info.lng+'&lat='+info.lat+'&name='+info.enName" target="_blank">查看地图</a></div>-->
                                <div class="address">{{info.enLocation}}</div>
                            </div>
                        </div>
                        <div class="right fr">
                            <div class="section">
                                <div class="bigTitle">公司环境 </div>
                                <el-carousel indicator-position="none" trigger="click" :interval='5000'>
                                    <el-carousel-item v-for="(item,index) in info.enPic_dictText" :key="index">
                                        <img :src="item">
                                    </el-carousel-item>
                                </el-carousel>
                                <div class="link" v-if="info.address">
                                    <div class="t">公司官网</div>
                                    <a :href="info.address" target="_blank">{{info.address}}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
		</div>
		<!-- 底部 -->
		<Footer />
    </div>
</template>

<script>
    import {companyIndex,baseSearch,screen,screenC} from '@/api/api'
	import Header from '@/components/Header.vue'
    import Footer from '@/components/Footer.vue'
    import QRCode from 'qrcodejs2'
	export default {
		//组件注入
		components: {Header,Footer},
        //存放数据
        data() {
            return {
                id:'',
                info:{},
                jobs:[],
            }
        },
        //接受父组件传递的值
        props:[],
        //监控data中的数据变化
        watch: {},
        //方法集合
        methods: {
            //屏蔽该企业
            screen(){
                if(this.userLoginFlag()){
                    //热招职位
                    screen({
                        'comId':this.id
                    }).then(res =>{
                        if(res.code==200){
                            this.$message.success('屏蔽成功');
                            this.info.shFlag = true
                        }else{
                            this.$message.error(res.message);
                        }
                    });
                }
            },
            //取消屏蔽该企业
            screenC(){
                if(this.userLoginFlag()){
                    //热招职位
                    screenC({
                        'comId':this.id
                    }).then(res =>{
                        if(res.code==200){
                            this.$message.success('取消屏蔽成功');
                            this.info.shFlag = false
                        }else{
                            this.$message.error(res.message);
                        }
                    });
                }
            },
            //生成二维码
            qrcode(){
                console.log(this.mUrl+'company?id='+ this.id)
                let qrcode = new QRCode('qrcode', {
                    width: 100,
                    height: 100,
                    text: this.mUrl+'company?id='+ this.id, // 二维码地址
                })
            },
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {

        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            this.id = this.$route.query.id
            //公司主页
            companyIndex({
                'id': this.id
            }).then(res =>{
                if(res.code==200){
                    //高德地图
                    /*var infoWindow;
                    var map = new AMap.Map('map', {
                        resizeEnable: true,
                        center: [res.result.lng, res.result.lat],
                        zoom:14
                    });
                    var marker = new AMap.Marker({
                        position: [res.result.lng, res.result.lat],
                    });
                    map.add(marker);*/
                    //构建信息窗体中显示的内容
                    var info = [];
                    info.push("<h2>"+res.result.enName+"</h2>");
                    info.push("<p>地址:"+res.result.enLocation+"</p>");
                    /*infoWindow = new AMap.InfoWindow({
                        content: info.join("")  //使用默认信息窗体框样式，显示信息内容
                    });
                    infoWindow.open(map, map.getCenter());
                    //鼠标点击marker弹出自定义的信息窗体
                    AMap.event.addListener(marker, 'click', function () {
                        infoWindow.open(map, marker.getPosition());
                    });*/
                    this.info = res.result
                    if(this.info.otherWelfare){
                        this.info.otherWelfare = this.info.otherWelfare.split(',')
                    }
                    if(this.info.enPic_dictText){
                        this.info.enPic_dictText = this.info.enPic_dictText.split(',')
                    }
                    //热招职位
                    baseSearch({
                        'type':'job',
                        'companyId.term':this.id,//搜索内容
                        //'bsType.keywords':0,//职位搜索
                        'pageNo':1,
                        'pageSize':6,
                    }).then(res =>{
                        if(res.code==200){
                            let list = res.result.records
                            for(let i in list){
                                list[i].money = list[i].minMoney/1000 + 'K-' + list[i].maxMoney/1000 + 'K'
                                if(list[i].minExperience==0&&list[i].maxExperience==0){
                                    list[i].experience = '无经验'
                                }else if(list[i].minExperience==0&&list[i].maxExperience==999){
                                    list[i].experience = '不限'
                                }else if(list[i].minExperience==null&&list[i].maxExperience==null){
                                    list[i].experience = '无经验'
                                }else{
                                    list[i].experience = list[i].minExperience + '-' + list[i].maxExperience + '年'
                                }
                            }
                            this.jobs = list
                        }
                    });
                }else{
                    this.$message.error(res.message);
                }
            });
            //生成二维码
            this.qrcode()
        }
    };
</script>
<style lang="scss">
    @mixin text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    @mixin text-ellipsisclamp($clamp){display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: $clamp;overflow: hidden;}
    @mixin transition{transition: all .3s;}
    .Company{background: #F6F6F6;
		.main{height: auto;padding-bottom: 40px;position: relative;z-index: 0;
            .banner{width: 100%;height: 350px;background: url('../../assets/company-bg.jpg') center no-repeat;background-size: cover;padding: 80px 0;
                .left{height: auto;overflow: hidden;
                    .logo{width: 210px;height: 90px;overflow: hidden;float: left;margin-right: 25px;
                        img{width: 100%;height: 100%;}
                    }
                    .text{height: auto;overflow: hidden;padding-top: 10px;
                        .name{font-size: 30px;color: #333;}
                        .other{height: auto;overflow: hidden;margin-top: 15px;
                            span{font-size: 14px;color: #333;display: inline-block;padding-right: 15px;position: relative;margin-right: 15px;
                                &:after{content: "";width: 1px;height: 11px;background: #A29C9C;position: absolute;right: 0;top: 5px;}
                                &:last-child:after{display: none;}
                            }
                        }
                    }
                }
                .right{height: auto;overflow: hidden;padding-top: 20px;
                    .el-button{float: right;margin-left: 40px;font-size: 16px;color: #fff;
                        i{font-size: 20px;vertical-align: -1px;}
                        &.submit{width: 180px;background: #fff;border-color: #fff;color: #E54437;font-size: 18px;font-weight: bold;}
                    }
                    .jobs{height: auto;overflow: hidden;font-weight: bold;color: #333;text-align: center;
                        .num{font-size: 24px;margin-bottom: 3px;}
                        .t{font-size: 16px;}
                    }
                    .qr{height: auto;overflow: hidden;float: right;margin: 30px 40px 0 0;text-align: center;
                        #qrcode{width: 112px;height: 112px;padding: 6px;background: #fff;}
                        p{font-size: 14px;color: #fff;margin-top: 5px;}
                    }
                }
            }
            .block{
                .bigTitle{height: 26px;line-height: 26px;font-size: 20px;color: #333;font-weight: bold;position: relative;padding-left: 15px;margin-bottom: 20px;
                    .more{font-size: 14px;color: #777;float: right;font-weight: normal;
                        &:hover{color: #E54437;}
                    }
                    &:before{content: "";width: 4px;height: 16px;background: #E54437;position: absolute;left: 0;top: 4px;}
                }
                .jobs{height: auto;overflow: hidden;margin: 30px 0 20px;
                    .list{width: 1215px;height: auto;
						.item{width: 390px;height: 105px;padding: 25px 20px;overflow: hidden;float: left;margin: 0 15px 15px 0;position: relative;background: #fff;cursor: pointer;@include transition();
							.info{height: auto;overflow: hidden;
								.name{width: 60%;font-size: 16px;color: #333;font-weight: bold;@include text-ellipsis();
									span{display: inline-block;font-size: 13px;color: #fff;background: #E54437;padding: 1px 5px 2px;vertical-align: 1px;font-weight: normal;margin-left: 10px;border-radius: 3px;}
								}
								.money{font-size: 20px;color: #E72618;position: absolute;right: 20px;top: 25px;}
								.dsc{margin-top: 15px;
									span{font-size: 14px;color: #666666;position: relative;padding-right: 12px;margin-left: 12px;
										&:after{content: "";width: 1px;height: 12px;background: #e8e8e8;position: absolute;right: 0;top: 2px;}
										&:first-child{margin: 0;}
										&:last-child:after{display: none;}
									}
								}
							}
							&:hover{box-shadow: 5px 5px 20px rgba(0,0,0,.05);transform: translateY(-2px);}
						}
					}
                }
                .company{height: auto;overflow: hidden;
                    .box{height: auto;overflow: hidden;background: #fff;padding: 40px 30px 40px 50px;
                        .left{width: 800px;height: auto;overflow: hidden;
                            .section{height: auto;overflow: hidden;margin-bottom: 50px;
                                .t{font-size: 18px;color: #000;margin-bottom: 15px;font-weight: bold;}
                                p{font-size: 15px;color: #999;line-height: 30px;margin-bottom: 5px;white-space: pre-wrap}
                                #map{height: 350px;margin: 30px auto 20px;
                                    .amap-info-content{padding: 10px 25px 10px 10px;
                                        h2{font-size: 14px;margin-bottom: 2px;color: #E54437;font-weight: bold;}
                                        p{font-size: 14px;color: #666;line-height: 20px;}
                                        .amap-info-close{right: 5px !important;}
                                    }
                                }
                                .address,.tel{font-size: 16px;color: #999;line-height: 30px;
                                    i{font-size: 18px;color: #E54437;vertical-align: -1px;margin-right: 5px}
                                    a{font-size: 14px;color: #E54437;margin-left: 10px;cursor: pointer;}
                                }
                                .fu{height: 25px;overflow: hidden;margin: 20px 0 0;
                                    span{font-size: 12px;color: #74767A;border: 1px solid #eee;line-height: 22px;padding: 0 8px;margin: 0 0 8px 8px;background: #F9F9F9;float: left;
                                        &:first-child{margin: 0;}
                                    }
                                }
                                &:last-child{margin-bottom: 0;}
                            }
                        }
                        .right{width: 250px;height: auto;overflow: hidden;
                            .bigTitle{font-size: 18px;}
                            .section{height: auto;overflow: hidden;margin-bottom: 50px;
                                .el-carousel__container{width: 100%;height: 150px;overflow: hidden;
                                    img{width: 100%;height: 100%;object-fit: cover;}
                                }
                                .link{height: auto;overflow: hidden;line-height: 20px;margin-top: 18px;
                                    .t{font-size: 14px;color: #666666;}
                                    a{font-size: 14px;color: #666666;
                                        &:hover{color: #E54437;}
                                    }
                                }
                            }
                        }
                    }
                }
            }
		}
	}
</style>
